<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../../component/jquery/form/check/com-check.css">
    <link rel="stylesheet" href="../../../src/css/common/common.css">
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.js"></script>
    <style>
    </style>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">


    class Checkbox extends React.Component {
        state = {
            allCheck:false,
            list:[]
        };
        componentWillMount () {
            this.state.list = this.props.data;
        }
        componentDidUpdate(){}
        onChange(item){
            let y=0;
            let n=0;
            let data = this.props.data;
            let isTrue = true;
            let newList = data.map((option,index)=>{
                if(option.id==item.id){
                    option.checked=!item.checked
                }
                if(option.checked){y++;}
                if(!option.checked){n++;}
                return option;
            });
            if(data.length==y){
                isTrue=true;
            }else{
                isTrue=false;
            }

            this.setState({
                list:newList,
                allCheck:isTrue
            })
        }
        handleCheckAll(){
            let val = !this.state.allCheck;
            let data = this.props.data;
            let newList = data.map((option,index)=>{
                option.checked = val;
                return option;
            });
            this.setState({
                list:newList,
                allCheck:val
            })
        }
        render() {
            let d = this.props.data;
            this.props.handleChange(this.state.list);
            return (
                <div className="com-check">
                    <label>
                        <i className={this.state.allCheck ? 'check-box box-add' : 'check-box'}></i>
                        <span className="ml3">全选</span>
                        <input type="checkbox" checked={this.state.allCheck} onClick={this.handleCheckAll.bind(this)} />
                    </label>
                    {this.state.list.map((option,index)=>{
                        return(
                            <div key={index}>
                                <label>
                                    <i className={option.checked ? 'check-box box-add' : 'check-box'}></i>
                                    <span className="ml3">{option.name}</span>
                                    <input type="checkbox" onChange={this.onChange.bind(this,option)} checked={option.checked} value={option.name} />
                                </label>
                            </div>
                        )
                    })}
                </div>
            );
        }
    }


    //父组件
    class Parent extends React.Component {
        state = {
            list:[
                {
                    id:1,
                    checked:true,
                    name:'小明'
                },
                {
                    id:2,
                    checked:false,
                    name:'小李'
                },
                {
                    id:3,
                    checked:false,
                    name:'小红'
                }
            ],
        };
        handleChange = (data) => {
            console.log(data);
        };
        render() {
            return (
                <div className="ml30 mt10">
                    <Checkbox data={this.state.list} handleChange={this.handleChange} />
                </div>
            );
        }
    }


    ReactDOM.render(
        <Parent/>,
        document.getElementById('example')
    );


</script>
</body>
</html>